#{extends 'noTab.html'/}
#{set title: 'Add video'/}



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="@{'/public/javascripts/jquery.fancybox-1.3.4.pack.js'}"></script>

<link rel="stylesheet" href="@{'/public/stylesheets/jquery.fancybox-1.3.4.css'}" type="text/css" media="screen" />

<script type="text/javascript" src="@{'/public/javascripts/jquery.validate.js'}"></script> 
	<script type="text/javascript" src="@{'/public/javascripts/jquery.validate.min.js'}"></script> 
	<script type="text/javascript" src="@{'/public/javascripts/validation.js'}"></script> 
#{if flash.success}
		<h2 style="color:GREEN"><img src="@{'public/images/tick-icon.png'}"/> ${flash.success}</h2>
		#{/if}
		#{if flash.error}
		<h2 style="color:RED"><img src="@{'public/images/error.png'}"/> ${flash.error}</h2>
		#{/if}
		<div class="clear"></div>
		
		
<h1 class="viewTitle">Add a video to <a class ="standardLink" href="@{Browse.viewIdea(idea.id)}">${idea.title}</a></h1> 

<script type="text/javascript">
	$(document).ready(function() {
	$("a#inline").fancybox({
		'hideOnContentClick': false
	});
	
	
});

</script>

<div class="viewContent">

<form id="addV" action="@{TopicController.addVid()}">

		<div class="formEntry">
		<label style="font-size:13px">*Paste the URL of the video in the field below from www.youtube.com </label>
		<br><label><i>Example :http://www.youtube.com/watch?v=0GEg2WOWvjA</i></label>
		<div class="clear"></div>
		</div>
		
		<div class="formEntry">
		<div class="formLabel">
		<label for="v2">Video: </label></div>
		<input id="v2"type="text" name="video" class="inputText"/>
		<div class="clear"></div>
		</div>
		<input type="submit" value="Add video" name="addVid" />
		<input type="hidden" value="${idea.id}" name="ideaId" />
</form>

#{if idea.videos.size()==0}
	<h2>Currently there are no videos for this idea.</h2>
#{/if}
#{else}
<h2>Current Videos:</h2>
<ul>
#{list idea.videos,as:'video'}
<li><a id="inline" href="#${video}"><img src="http://img.youtube.com/vi/${video}/2.jpg"/></a>
    
        
        
        <div style="display:none">


	<div id="${video}"><iframe name ="frame"  width="560" height="349"  src="http://www.youtube.com/embed/${video}" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
</li>
#{form @TopicController.removeVid()}
	<input type="hidden" name="video" value="${video}">
	<input type="hidden" name="ideaId" value="${idea.id}">
	<input type="submit" name="remove" value="Remove video">
	#{/form}
#{/list}
</ul>
#{/else}
 </div>